<template>
    <div class="ctrlmain">
        <div class="title">
            <h1>能 源 控 制 系 统</h1>
            <p></p>
        </div>
        <div class="container">
            <div class="ctrlbuttun" onclick="location.href='/policy'">控制管理</div>
            <div class="devbuttun" onclick="location.href='/entry'">设备管理</div>
            <div class="databuttun" onclick="location.href='/data'">数据展示</div>
        </div>
    </div>
</template>


<script setup>

</script>

<style scoped>
.title {
    text-align: center;
    font-size: 24px;
    flex: 4;
    color: #051d05;
}

.ctrlmain {
    display: flex;
    padding: 20px;
    height: 100vh;
    background-color: rgba(123, 57, 129, 0.5);
    background-image:linear-gradient(to bottom,rgba(66, 66, 58, 0.5),rgba(0, 255, 21, 0.5)) , url("../img/ctrl.png");
    background-size: 1100px;
    background-repeat: no-repeat;
}

.container {
    margin-top: 0vh;
    flex: 2;
    justify-content: center;
    text-align: center;
    line-height: 200px;
    font-size: 40px;
    color: rgb(20, 19, 20);
    left: 30%;
    right: 70%;
    
}

.ctrlbuttun {
    margin-top: 40px;
    margin-bottom: 40px;
    background-color: #1c2f86;
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 15px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-left: 3px solid;
    border-top: 3px solid;
    background-image: url("../img/policy.png");
    background: linear-gradient(rgba(218, 202, 202, 0.5), rgba(99, 92, 92, 0.5)), url("../img/policy.png") no-repeat 0% 20%/ cover;
    cursor: pointer;
}

.devbuttun {
    margin-top: 40px;
    margin-bottom: 40px;
    background-color: #2b9928;
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 15px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-left: 3px solid;
    border-top: 3px solid;
    cursor: pointer;
    background: linear-gradient(rgba(218, 202, 202, 0.5), rgba(99, 92, 92, 0.5)), url("../img/dev.png") no-repeat 0% 20%/ cover;
}

.databuttun {
    margin-top: 40px;
    margin-bottom: 40px;
    background-color: #2b9928;
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 15px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-left: 3px solid;
    border-top: 3px solid;
    cursor: pointer;
    background: linear-gradient(rgba(218, 202, 202, 0.5), rgba(99, 92, 92, 0.5)), url("../img/data.png") no-repeat 0% 20%/ cover;
}
</style>